"use client"
import { useState } from 'react';
import { MySelect, SelectOption  } from './component/my-select';
export default function Home() {
  const [value1, setValue1] = useState<string | undefined>();
  const [value2, setValue2] = useState<string[] | undefined>([]);

  const [value3, setValue3] = useState<string | undefined>();
  const [value4, setValue4] = useState<string[] | undefined>([]);

  const [value5, setValue5] = useState<string | undefined>();
  const [value6, setValue6] = useState<string[] | undefined>([]);

  const [value7, setValue7] = useState<string | undefined>();
  const [value8, setValue8] = useState<string[] | undefined>([]);

  const [value9, setValue9] = useState<string | undefined>();
  const [value10, setValue10] = useState<string[] | undefined>([]);

  const [value11, setValue11] = useState<string | undefined>();
  const [value12, setValue12] = useState<string[] | undefined>([]);

  const [value13, setValue13] = useState<string | undefined>();
  const [value14, setValue14] = useState<string[] | undefined>([]);

  const [value15, setValue15] = useState<string | undefined>();
  const [value16, setValue16] = useState<string[] | undefined>([]);

  const options: SelectOption<string>[] = [
    { label: 'Apple', value: 'apple', img: 'https://i.pinimg.com/1200x/41/1c/ef/411cef15dbf9957f6dfb5be914dfedff.jpg' },
    { label: 'Banana', value: 'banana', img: 'https://i.pinimg.com/736x/7e/93/03/7e9303b9fec36e20a72ff9c648fa99cb.jpg' },
    { label: 'Orange', value: 'orange', img: 'https://i.pinimg.com/736x/90/28/81/90288198edffa1d0f96b194ae0448409.jpg' },
    { label: 'Pear', value: 'pear', img: 'https://i.pinimg.com/736x/44/fe/76/44fe760109a94b23eecc27f8458e21cd.jpg' },
    { label: 'Watermelon', value: 'watermelon', img: 'https://i.pinimg.com/736x/a0/2c/40/a02c406801b975613da6b02570d843a5.jpg' },
    { label: 'Pineapple', value: 'pineapple', img: 'https://i.pinimg.com/736x/5f/6f/9c/5f6f9cd727a1fe7cca363827901aaf29.jpg' },
    { label: 'Strawberry', value: 'strawberry', img: 'https://i.pinimg.com/736x/48/32/7b/48327baffcf427874aeeabe915abbf94.jpg' },
    { label: 'Cherry', value: 'cherry', img: 'https://i.pinimg.com/736x/b3/a6/a4/b3a6a4d0e359e8ac9a1c22731baffedc.jpg' },
    { label: 'Mango', value: 'mango', img: 'https://i.pinimg.com/736x/70/c5/70/70c570c2ad3fbdb093281980847dd9ab.jpg' },
  ];

  const [value17, setValue17] = useState<number | undefined>();
  const [value18, setValue18] = useState<number[] | undefined>([]);
  const options2: SelectOption<number>[] = [
    { label: 'Apple', value: 1 },
    { label: 'Banana', value: 2 },
    { label: 'Orange', value: 3 },
    { label: 'Pear', value: 4 },
    { label: 'Watermelon', value: 5 },
  ];

  const [value19, setValue19] = useState<{slug: string, id: number} | undefined>();
  const [value20, setValue20] = useState<{slug: string, id: number}[] | undefined>([]);
  const options3: SelectOption<{slug: string, id: number}>[] = [
    { label: 'Apple', value: {
      slug: 'apple',
      id: 1,
    } },
    { label: 'Banana', value: {
      slug: 'banana',
      id: 2,
    } },
    { label: 'Orange', value: {
      slug: 'orange',
      id: 3,
    } },
    { label: 'Pear', value: {
      slug: 'pear',
      id: 4,
    } },
    { label: 'Watermelon', value: {
      slug: 'watermelon',
      id: 5,
    } },
  ];

  return (
    <div className='max-w-[800px] m-auto'>
      <h2 className='text-[20px] font-bold'>单选&多选</h2>
      <ul className='flex max-md:flex-col gap-4'>
        <section className='flex-1 shrink-0'>
          <h2>(默认)单选: 返回对象
            <br />
            默认string {JSON.stringify(value1)}</h2>
          <MySelect
            options={options} name='Fruit'
            value={value1}
            onChange={setValue1}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0'>
          <h2>(multiple)多选: 返回数组
            <br />
            默认string[] {JSON.stringify(value2)}</h2>
          <MySelect
            options={options} name='Fruit'
            value={value2}
            onChange={setValue2}
            multiple={true}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>数字类型</h2>
      <ul className='flex max-md:flex-col gap-4'>
        <section className='flex-1 shrink-0'>
          <h2>(默认)单选: 返回对象
            <br />
            number {JSON.stringify(value17)}</h2>
          <MySelect<number>
            options={options2} name='Fruit'
            value={value17}
            onChange={setValue17}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0'>
          <h2>(multiple)多选: 返回数组
            <br />
            number[] {JSON.stringify(value18)}</h2>
          <MySelect<number, true>
            options={options2} name='Fruit'
            value={value18}
            onChange={setValue18}
            multiple={true}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>对象类型：暂时不处理显示问题，感觉基本用不上</h2>
      <ul className='flex max-md:flex-col gap-4'>
        <section className='flex-1 shrink-0'>
          <h2>(默认)单选: 返回对象
            <br />
            {JSON.stringify(value19)}</h2>
          <MySelect<{slug: string, id: number}>
            options={options3} name='Fruit'
            value={value19}
            onChange={setValue19}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0'>
          <h2>(multiple)多选: 返回数组
            <br />
            {JSON.stringify(value20)}</h2>
          <MySelect<{slug: string, id: number}, true>
            options={options3} name='Fruit'
            value={value20}
            onChange={setValue20}
            multiple={true}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>(placeholder)占位符</h2>
      <ul className='flex max-md:flex-col gap-4'>
        <section className='flex-1 shrink-0'>
          <MySelect
            options={options} name='Fruit'
            value={value3}
            onChange={setValue3}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0'>
          <MySelect
            options={options} name='Fruit'
            value={value4}
            onChange={setValue4}
            multiple={true}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>(disabled)禁用</h2>
      <ul className='flex max-md:flex-col gap-4'>
        <section className='flex-1 shrink-0'>
          <MySelect
            options={options} name='Fruit'
            value={value5}
            onChange={setValue5}
            disabled
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0'>
          <MySelect
            options={options} name='Fruit'
            value={value6}
            onChange={setValue6}
            disabled
            multiple={true}
            placeholder="选择水果"
            className="w-[250px]">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>(className)自定义触发器类名</h2>
      <ul className='flex max-md:flex-col gap-4 bg-[url(https://i.pinimg.com/736x/86/ff/c7/86ffc7a9149e188edcf0427e337a5504.jpg)]'>
        <section className='flex-1 shrink-0 p-3'>
          <MySelect
            options={options} name='Fruit'
            value={value7}
            onChange={setValue7}
            placeholder="选择水果"
            className="w-[250px] !shadow-none hover:!bg-transparent backdrop-blur-md bg-white/10 border-white/60 !text-white">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0 p-3'>
          <MySelect
            options={options} name='Fruit'
            value={value8}
            onChange={setValue8}
            multiple={true}
            placeholder="选择水果"
            className="w-[250px] !shadow-none hover:!bg-transparent backdrop-blur-md bg-white/10 border-white/60 !text-white">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>(triggerRender)自定义触发器</h2>
      <ul className='flex max-md:flex-col gap-4'>
        <section className='flex-1 shrink-0'>
          <h2>triggerRender: (value) =&gt; ReactNode</h2>
          value: {JSON.stringify(value9)}
          <MySelect
            options={options} name='Fruit'
            value={value9}
            onChange={setValue9}
            triggerRender={(val)=>(<div className='px-2 py-1 border flex items-center gap-2'>
              <img className='w-12 h-12 rounded-full' src={options.find((option) => option.value === value9)?.img} alt="" />
              {val || '请输入'}
            </div>)}
            placeholder="选择水果">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0'>
          <h2>triggerRender: (values) =&gt; ReactNode</h2>
          values: {JSON.stringify(value10)}
          <MySelect
            options={options} name='Fruit'
            value={value10}
            onChange={setValue10}
            triggerRender={(vals)=>(<div className='px-2 py-1 border'>{vals?.map((val)=>val).join(',') || '请选择'}</div>)}
            multiple={true}
            placeholder="选择水果">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>(contentClassName)自定义内容类名</h2>
      <ul className='flex max-md:flex-col gap-4'>
        <section className='flex-1 shrink-0'>
          <MySelect
            options={options} name='Fruit'
            value={value9}
            onChange={setValue9}
            contentClassName="bg-[#045b62] border-none text-white"
            placeholder="选择水果">
          </MySelect>
        </section>
        <section className='flex-1 shrink-0'>
          <MySelect
            options={options} name='Fruit'
            value={value10}
            onChange={setValue10}
            contentClassName="bg-[#045b62] border-none text-white"
            multiple={true}
            placeholder="选择水果">
          </MySelect>
        </section>
      </ul>
      <br />
      <hr />


      <h2 className='text-[20px] font-bold'>options禁用：感觉暂时用不到</h2>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>showSearch: 展示搜索</h2>
      <ul className='flex max-md:flex-col gap-4'>
      <section className='flex-1 shrink-0'>
        <MySelect
          options={options} name='Fruit'
          value={value11}
          onChange={setValue11}
          showSearch
          placeholder="选择水果"
          className="w-[250px]">
        </MySelect>
      </section>
      <section className='flex-1 shrink-0'>
        <MySelect
          options={options} name='Fruit'
          value={value12}
          onChange={setValue12}
          showSearch
          multiple={true}
          placeholder="选择水果"
          className="w-[250px]">
        </MySelect>
      </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>prefix: 自定义前缀</h2>
      <ul className='flex max-md:flex-col gap-4'>
      <section className='flex-1 shrink-0'>
        <MySelect
          options={options} name='Fruit'
          value={value13}
          onChange={setValue13}
          prefix={<div>QQ</div>}
          showSearch
          placeholder="选择水果"
          className="w-[250px]">
        </MySelect>
      </section>
      <section className='flex-1 shrink-0'>
        <MySelect
          options={options} name='Fruit'
          value={value14}
          onChange={setValue14}
          prefix={<div>QQ</div>}
          showSearch
          multiple={true}
          placeholder="选择水果"
          className="w-[250px]">
        </MySelect>
      </section>
      </ul>
      <br />
      <hr />

      <h2 className='text-[20px] font-bold'>suffix: 自定义后缀</h2>
      <ul className='flex max-md:flex-col gap-4'>
      <section className='flex-1 shrink-0'>
        <MySelect
          options={options} name='Fruit'
          value={value15}
          onChange={setValue15}
          suffix={<div>.com</div>}
          showSearch
          placeholder="选择水果"
          className="w-[250px]">
        </MySelect>
      </section>
      <section className='flex-1 shrink-0'>
        <MySelect
          options={options} name='Fruit'
          value={value16}
          onChange={setValue16}
          suffix={<div>.com</div>}
          showSearch
          multiple={true}
          placeholder="选择水果"
          className="w-[250px]">
        </MySelect>
      </section>
      </ul>
      <br />
      <hr />
    </div>
  );
}